@width: 100px;
@height: @width + 10px;
#header {
  width: @width;
  height: @height;
  background: #337c91;
}

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu{
  color: #111;
  margin: 30px;
  width: @width;
  height: @height;
  .bordered();
}

#header {
  color: black;
  .navigation {
    font-size: 20px;
  }
  .logo {
    width:50px;
	height: 60px;
	background: #006400;
  }
}

@base: #f04615;
@width: 0.5;

.class {
	margin: 100px;
	width: percentage(@width); // returns `50%`
	// height: percentage(@width); // returns `50%`
	color: saturate(@base, 5%);
	background-color: spin(lighten(@base, 25%), 8);
}

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}





